<script setup>
	import $http from '@/utils/http'
	import { ref, reactive, onMounted, defineEmits } from 'vue'
	import { useAppStoreHook } from '@/stores/modules/app'
	import { useUserStoreHook } from '@/stores/modules/user'
	import { useToast } from 'wot-design-uni'
	
	import mailIcon from '@/static/icon/login/mail.png'
	import phoneIcon from '@/static/icon/login/phone.png'
	
	const toast = useToast()
	const useAppStore = useAppStoreHook()
	const useUserStore = useUserStoreHook()
	const loginForm = ref()
	const checkboxKey = ref(false)
	const loginFormData = reactive({
	  login: '',
	  password: '',
		repassword: '',
	})
	
	const emit = defineEmits(['success'])	 
	// 登录成功后执行
	const successLogin = () => {
	  emit('success')
	}

	const init = async () => {
		const getLogin = await useAppStore.GET_LOGIN_DATA()
		if(getLogin.login) {checkboxKey.value = true} 
		loginFormData.login = getLogin.login
		loginFormData.password = getLogin.password
		loginFormData.repassword = getLogin.repassword
	}
	
	// 请求登录
	const requestLogin = (data) => {
		return new Promise(async (resolve, reject) => {
			try {
				const res = await $http.request({
					url: `/login`,
					method: 'POST',
					data: data,
				})
				resolve(res)
			} catch (e) {
				reject(e)
			}
		})
	}
	
	// 登录按钮
	const login = async () => {
		if(!loginFormData.login || !loginFormData.password || !loginFormData.repassword) { return }
		if(loginFormData.password !== loginFormData.repassword) { return }
		
		const res =	await requestLogin(loginFormData)
		if(res.code !== 200) {
			toast.show({
				position: 'bottom',
				msg: res.msg
			})
			return
		}
		useUserStore.SET_USERINFO(res.data)
		toast.show({
		  position: 'bottom',
		  msg: res.msg
		})
		successLogin()
		uni.switchTab({
			url: '/pages/user/user'
		});
	}
	
	// 记住密码
	const rememberForgotten = ({ value }) => {
		if(!loginFormData.login || !loginFormData.password || !loginFormData.repassword) { return }
		if(loginFormData.password !== loginFormData.repassword) { return }
		if(value) {
			useAppStore.SET_LOGIN_DATA(loginFormData)
			return
		}
		useAppStore.REMOVR_LOGIN_DATA()
	}
	
	// 忘记密码
	const forgottenOn = () => {
		console.log('忘记密码')
	}
	
	// 邮箱登录
	const mailLogin = () => {
		console.log('邮箱登录')
	}
	
	// 手机号登录
	const phoneLogin = () => {
		console.log('手机号登录')
	}
	
	onMounted(() => {
		init()
	})
	
</script>

<template>
	<view class="login-form">
		<view class="form-itme">
			<input class="itme-input" v-model="loginFormData.login" type="text" placeholder="账号/邮箱/手机号" />
		</view>
		<view class="form-itme">
			<input class="itme-input" v-model="loginFormData.password" type="password" placeholder="密码" />
		</view>
		<view class="form-itme">
			<input class="itme-input" v-model="loginFormData.repassword" type="password" placeholder="确认密码" />
		</view>
		<view class="remember-forgotten-box">
			<wd-checkbox v-model="checkboxKey" @change="rememberForgotten" />
			<text class="remember-text">记住</text>
			<text class="forgotten-text" @click="forgottenOn">忘记密码</text>
		</view>
		<view class="login-btn-box">
			<wd-button size="large" class="login-btn" @click="login">登录</wd-button>
		</view>
		<view class="login-other-box">
			<image class="mail" @click="mailLogin" :src="mailIcon"></image>
			<image class="phone" @click="phoneLogin" :src="phoneIcon"></image>
		</view>
	</view>
	<wd-toast />
</template>

<style scoped lang="scss">

.login-form {
	width: 100%;
	box-sizing: border-box;
	
	.form-itme {
		height: 75rpx;
		margin: 10rpx 0;
		border-radius: 5rpx;
		background-color: rgba( 75, 83,102, 0.5);
		
		.itme-input {
			width: 100%;
			height: 100%;
			color: #eeeeee;
			padding: 0 20rpx;
			font-size: 34rpx;
			box-sizing: border-box;
		}
	}
	
	.remember-forgotten-box {
		height: 40rpx;
		margin: 10rpx 0;
		
		display: flex;
		align-items: center;
		
		.remember-text {
			color: #eeeeee;
			font-size: 28rpx;
			margin-left: -10rpx;
		}
		
		.forgotten-text {
			font-size: 28rpx;
			margin-left: auto;
		}
	}
	
	.login-btn-box {
		margin: 50rpx 0;
		display: flex;
		justify-content: center;
		.login-btn {
			width: 100%;
			border-radius: 45rpx;
		}
	}
	
	.login-other-box {
		width: 100%;
		height: 80rpx;
		margin-top: 20rpx;
		
		display: flex;
		align-items: center;
		justify-content: center;
		
		.mail {
			width: 60rpx;
			height: 60rpx;
			margin-right: 30rpx;
		}
		.phone {
			width: 50rpx;
			height: 50rpx;
			margin-left: 30rpx;
		}
	}
}
</style>